<template>
  <el-row :gutter="30">
    <el-col :xs="4" :sm="4" :md="4" :lg="4" :xl="4">
      <div class="grid-content bg-purple">
        <el-tree
          v-if="treeData.length"
          ref="tree"
          :default-expand-all="true"
          :data="treeData"
          :props="defaultProps"
          :filter-node-method="filterNode"
          :highlight-current="true"
          node-key="id"
          :current-node-key="treeData[0].children[0].id"
          @node-click="handleNodeClick"
        >
          <!-- <span slot-scope="{ node, data }" class="custom-tree-node">
            <span v-if="data.children"><i class="el-icon-edit" /></span>
            <span v-else style="margin-right: 0px"><i class="el-icon-caret-right" /></span>
            <span>{{ data.label }}</span>
          </span> -->
        </el-tree>
      </div>
    </el-col>
    <el-col :xs="20" :sm="20" :md="20" :lg="20" :xl="20">
      <div class="grid-content bg-purple-light">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane v-for="(item, index) in tabs" :key="index" :label="item.value" :name="item.name">
            <div class="wrap">
              <keep-alive>
                <component :is="item.name" v-if="item.name === defaultPane" :id="currentKey" />
              </keep-alive>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import { mapGetters } from 'vuex'
import { getStationDeviceTree, getStationDeviceTab } from '@/api/stationMonitor'
import DeviceData from './components/DeviceData'
import DeviceAlarm from './components/DeviceAlarm'
import DeviceChart from './components/DeviceChart'
import DeviceTable from './components/DeviceTable'
export default {
  components: {
    DeviceData,
    DeviceAlarm,
    DeviceChart,
    DeviceTable
  },
  data() {
    return {
      treeData: [],
      tabs: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      test: 0,
      currentKey: 0,
      activeName: 'deviceData',
      deviceData: 'DeviceData',
      deviceAlarm: 'DeviceAlarm',
      deviceChart: 'DeviceChart',
      deviceTable: 'DeviceTable',
      defaultPane: ''
    }
  },
  computed: {
    ...mapGetters([
      'stationId'
    ])
  },
  watch: {
    stationId(val) {
      console.log(val)
      val && this.getStationDeviceTree()
      val && this.getStationDeviceTab()
    }
  },
  created() {
    this.stationId && this.getStationDeviceTree()
    this.stationId && this.getStationDeviceTab()
  },
  methods: {
    getStationDeviceTree() {
      const option = {
        stationId: this.stationId
      }
      getStationDeviceTree(option).then(res => {
        const { data } = res
        this.treeData = []
        for (let i = 0; i < 1; i++) {
          this.treeData.push({
            label: data[i].station_name,
            children: []
          })
          data.map(item => {
            const child = {
              label: item.name,
              id: item.id
            }
            this.treeData[0].children.push(child)
          })
        }
        this.currentKey = this.treeData[0].children[0].id
        this.$nextTick(() => {
          this.$refs['tree'].setCurrentKey(this.currentKey)
        })
        console.log(this.currentKey)
        // this.defaultPane = 'deviceData'
        if (!this.defaultPane) {
          this.defaultPane = 'deviceData'
        }
      })
    },
    getStationDeviceTab() {
      const option = {
        stationId: this.stationId
      }
      getStationDeviceTab(option).then(res => {
        const { data } = res
        this.tabs = data
      })
    },
    handleClick(tab, event) {
      this.defaultPane = tab.name
      // console.log(tab.name)
      // console.log('asdf')
      // console.log(tab, event)
    },
    handleNodeClick(data) {
      // console.log(data)
      this.currentKey = data.id
      console.log(this.currentKey)
    },
    filterNode(value, data) {
      console.log(value, data)
      // if (!value) return true
      // return data.label.indexOf(value) !== -1
    }
  }

}
</script>

<style scoped>
  .wrap {
    border: 1px solid #000;
    min-height: calc(100vh - 210px);
    height: calc(100vh - 210px);
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple {
    background: #d3dce6;
    padding: 5px;
  }
  .bg-purple-light {
    background: #e5e9f2;
    padding: 5px 15px;
  }
  .grid-content {
    border-radius: 4px;
    min-height: calc(100vh - 143px);
    max-height: calc(100vh - 143px);

  }
  .el-tree {
    max-height: calc(100vh - 155px);
    overflow: scroll;
  }
</style>
